<style include="settings-page-styles cr-hidden-style settings-shared">
  :host([is-subpage-animating]) {
    /* Prevent an unwanted horizontal scrollbar when transitioning back from
      * a sub-page. */
    overflow: hidden;
  }

  .banner {
    align-items: center;
    background-color: var(--cros-bg-color);
    border: var(--cr-hairline);
    border-radius: var(--cr-card-border-radius);
    display: flex;
    margin-bottom: var(--cr-section-vertical-margin);
    margin-top: var(--cr-section-vertical-margin);
  }

  .eol-warning-icon {
    align-items: center;
    background:
      rgba(var(--cros-icon-color-warning-rgb), var(--cros-second-tone-opacity));
    border-radius: 50%;
    display: flex;
    flex: 0 0 auto;
    height: 40px;
    justify-content: center;
    margin-inline-end: var(--cr-section-padding);
    width: 40px;
  }

  .eol-warning-icon iron-icon {
    --iron-icon-fill-color: var(--cros-icon-color-warning);
    margin: 0;
  }

  #advancedToggle {
    --ink-color: currentColor;
    align-items: center;
    background: transparent;
    border: none;
    box-shadow: none;
    color: currentColor;
    display: flex;
    font-weight: 400;
    margin-bottom: 3px;
    margin-top: 12px;  /* Part of a 48px spacer (33px + 12px + 3px). */
    min-height: 32px;
    padding: 0 12px;
  }

  :host-context(.focus-outline-visible) #advancedToggle:focus {
    font-weight: 600;
  }

  #openInNewBrowserSettingsIcon {
    fill: var(--cros-link-color);
    margin-inline-start: 0;
  }

  #secondaryUserIcon {
    align-items: center;
    background: rgba(
      var(--cros-icon-color-prominent-rgb), var(--cros-second-tone-opacity));
    border-radius: 50%;
    display: flex;
    flex: 0 0 auto;
    height: 40px;
    justify-content: center;
    margin-inline-end: var(--cr-section-padding);
    width: 40px;
  }

  #secondaryUserIcon iron-icon {
    --iron-icon-fill-color: var(--cros-icon-color-prominent);
    margin: 0;
  }

  #toggleContainer {
    align-items: center;
    color: var(--cros-text-color-primary);
    display: flex;
    font: inherit;
    justify-content: center;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
  }

  #toggleSpacer {
    padding-top: 33px;  /* Part of a 48px spacer (33px + 12px + 3px). */
  }

  iron-icon {
    margin-inline-start: 16px;
  }
</style>
<template is="dom-if" if="[[showBasicPage_(
    currentRoute_, hasExpandedSection_)]]">
  <div id="basicPage">
    <template is="dom-if" if="[[computeShowUpdateRequiredEolBanner_(
        hasExpandedSection_, showUpdateRequiredEolBanner_)]]">
      <div id="updateRequiredEolBanner"
          class="settings-box two-line banner">
        <div class="eol-warning-icon">
          <iron-icon icon="cr20:banner-warning"></iron-icon>
        </div>
        <localized-link id="bannerText" class="start"
            localized-string="$i18n{updateRequiredEolBannerText}">
        </localized-link>
        <cr-icon-button title="$i18n{close}" id="closeUpdateRequiredEol"
            class="icon-clear" on-click="onCloseEolBannerClicked_"
            aria-describedby="bannerText">
        </cr-icon-button>
      </div>
    </template>
    <div id="secondaryUserBanner" class="settings-box two-line banner"
        hidden="[[!showSecondaryUserBanner_]]">
      <div id="secondaryUserIcon">
        <iron-icon icon="os-settings:social-group"></iron-icon>
      </div>
      <div class="flex">$i18n{secondaryUserBannerText}</div>
    </div>
    <settings-section page-title="$i18n{internetPageTitle}"
        section="internet">
      <settings-internet-page prefs="{{prefs}}">
      </settings-internet-page>
    </settings-section>
    <settings-section page-title="$i18n{bluetoothPageTitle}"
        section="bluetooth">
      <template is="dom-if" if="[[!isBluetoothRevampEnabled_]]" restamp>
        <settings-bluetooth-page prefs="{{prefs}}">
        </settings-bluetooth-page>
      </template>
      <template is="dom-if" if="[[isBluetoothRevampEnabled_]]" restamp>
        <os-settings-bluetooth-page prefs="{{prefs}}">
        </os-settings-bluetooth-page>
      </template>
    </settings-section>
    <template is="dom-if" if="[[!isGuestMode_]]" restamp>
      <settings-section page-title="$i18n{multidevicePageTitle}"
          section="multidevice">
        <settings-multidevice-page prefs="{{prefs}}">
        </settings-multidevice-page>
      </settings-section>
    </template>
    <template is="dom-if" if="[[!isGuestMode_]]" restamp>
      <settings-section page-title="$i18n{osPeoplePageTitle}"
          section="osPeople">
        <os-settings-people-page prefs="{{prefs}}"
            page-visibility="[[pageVisibility]]">
        </os-settings-people-page>
      </settings-section>
    </template>
    <template is="dom-if" if="[[showKerberosSection]]" restamp>
      <settings-section page-title="$i18n{kerberosPageTitle}"
          section="kerberos">
        <settings-kerberos-page></settings-kerberos-page>
      </settings-section>
    </template>
    <settings-section page-title="$i18n{devicePageTitle}"
        section="device">
      <settings-device-page prefs="{{prefs}}"
          show-crostini="[[showCrostini]]">
      </settings-device-page>
    </settings-section>
    <template is="dom-if" if="[[!isGuestMode_]]" restamp>
      <settings-section page-title="$i18n{personalizationPageTitle}"
          section="personalization">
        <settings-personalization-page prefs="{{prefs}}">
        </settings-personalization-page>
      </settings-section>
    </template>
    <settings-section page-title="$i18n{osSearchPageTitle}"
        section="osSearch">
      <os-settings-search-page prefs="{{prefs}}">
      </os-settings-search-page>
    </settings-section>
    <settings-section page-title="$i18n{privacyPageTitle}"
        section="osPrivacy">
      <os-settings-privacy-page prefs="{{prefs}}">
      </os-settings-privacy-page>
    </settings-section>
    <settings-section page-title="$i18n{appsPageTitle}" section="apps">
      <os-settings-apps-page
          prefs="{{prefs}}"
          android-apps-info="[[androidAppsInfo]]"
          have-play-store-app="[[havePlayStoreApp]]"
          show-android-apps="[[showAndroidApps]]"
          show-arcvm-manage-usb="[[showArcvmManageUsb]]"
          show-plugin-vm="[[showPluginVm]]"
          show-startup="[[showStartup]]">
      </os-settings-apps-page>
    </settings-section>
  </div>
</template>

<template is="dom-if" if="[[!hasExpandedSection_]]">
  <div id="toggleSpacer"></div>
  <h2 id="toggleContainer">
    <cr-button id="advancedToggle" on-click="advancedToggleClicked_"
        aria-expanded$="[[boolToString_(advancedToggleExpanded)]]">
      <span>$i18n{advancedPageTitle}</span>
      <iron-icon icon="[[getArrowIcon_(advancedToggleExpanded)]]">
      </iron-icon>
    </cr-button>
  </h2>
</template>

<settings-idle-load id="advancedPageTemplate"
    url="chromeos/lazy_load.html">
  <template>
    <div id="advancedPage" hidden$="[[!showAdvancedPage_(
        currentRoute_, hasExpandedSection_,
        advancedToggleExpanded)]]">
      <settings-section page-title="$i18n{dateTimePageTitle}"
          section="dateTime">
        <settings-date-time-page prefs="{{prefs}}">
        </settings-date-time-page>
      </settings-section>
      <settings-section page-title="$i18n{osLanguagesPageTitle}"
          section="osLanguages">
        <os-settings-languages-section prefs="{{prefs}}">
        </os-settings-languages-section>
      </settings-section>
      <template is="dom-if" if="[[!isGuestMode_]]">
        <settings-section page-title="$i18n{filesPageTitle}"
            section="files">
          <os-settings-files-page prefs="{{prefs}}">
          </os-settings-files-page>
        </settings-section>
      </template>
      <settings-section page-title="$i18n{printingPageTitle}"
          section="osPrinting">
        <os-settings-printing-page prefs="{{prefs}}">
        </os-settings-printing-page>
      </settings-section>
      <template is="dom-if" if="[[showCrostini]]" restamp>
        <settings-section page-title="$i18n{crostiniPageTitle}"
            section="crostini">
          <settings-crostini-page prefs="{{prefs}}"
              allow-crostini="[[allowCrostini_]]">
          </settings-crostini-page>
        </settings-section>
      </template>
      <settings-section page-title="$i18n{a11yPageTitle}"
          section="osAccessibility">
        <os-settings-a11y-page prefs="{{prefs}}">
        </os-settings-a11y-page>
      </settings-section>
      <template is="dom-if" if="[[showReset]]">
        <settings-section page-title="$i18n{resetPageTitle}"
            section="osReset">
          <os-settings-reset-page></os-settings-reset-page>
        </settings-section>
      </template>
    </div>
  </template>
</settings-idle-load>
